import React, {Suspense} from 'react';
import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom';
import routes from './routerConfig';
import {ROUTERTYPES} from '../type/router.d'

function routerView() {
  const renderRouter=(routes:ROUTERTYPES[])=>{
    return routes.map((item,index)=>{
      return <Route key={index} path={item.path}
      element={item.to?<Navigate to={item.to} />:<item.component />}>
        {
          item.children && renderRouter(item.children)
        }
      </Route>
    })
  }
  return (
    <BrowserRouter >
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           {
             renderRouter(routes)
           }
         </Routes>
       </Suspense>
    </BrowserRouter>
  )
}

export default routerView